<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<!--<meta name="viewport" content="width=device-width,initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover">-->
		<meta name="viewport" content="width=device-width,initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=auto">
		<title></title>
		<style media="screen">
			* {
				margin: 0;
				padding: 0;
			}
			
			body {
				background-color: #A4F4B0;
			}
			
			header {
				background-color: red;
				height: 50px;
				line-height: 50px;
				width: 100%;
				color: white;
				text-align: center;
				position: fixed;
			}
			
			footer {
				background-color: red;
				height: 50px;
				line-height: 50px;
				width: 100%;
				color: white;
				text-align: center;
				position: fixed;
				bottom: 0px;
			}
			
			button {
				position: absolute;
				left: 0;
				background-color: blue;
				color: white;
				border: none;
				height: 50px;
				width: 80px
			}
			
			ul {
				list-style: none;
				width: 100%;
				background-color: #A4F4B0;
			}
			
			li {
				list-style: none;
				height: 50px;
				width: 100%
			}
		</style>
	</head>

	<body>
		<header>
			<button type="button" name="button">返回</button> 头部
		</header>
		<ul>
			<li>第一条</li>
			<li>第一条</li>
			<li>第一条</li>
			<li>第一条</li>
			<li>第一条</li>
			<li>第一条</li>
			<li>第一条</li>
			<li>第一条</li>
			<li>第一条</li>
			<li>第一条</li>
			<li>第一条</li>
			<li>第一条</li>
			<li>第一条</li>
			<li>第一条</li>
			<li>第一条</li>
			<li>第一条</li>
			<li>第一条</li>
			<li>第一条</li>
			<li>第一条</li>
			<li>第一条</li>
			<li>第一条</li>
			<li>第一条</li>
			<li>第一条</li>
			<li>第一条</li>
			<li>第一条</li>
			<li>第一条</li>
			<li>第一条</li>
			<li>第一条</li>
			<li>第一条</li>
			<li>第一条</li>
			<li>第一条</li>
			<li>第一条</li>
			<li>第一条</li>
			<li>第一条</li>
			<li>第一条</li>
		</ul>
		<footer>
			<button type="button" name="button">返回</button> 底部
		</footer>
	</body>

</html>